import React, { useState } from "react"
import { View } from "@tarojs/components"
import "./index.scss"
import PriceDetail from "../../../../components/price-detail"
import Modal from "../../../../components/Modal"

export default function ({ data, onCancel, onSubmit, submiteButtonText }) {
  const [showPriceDetail, setShowPriceDetail] = useState(null)
  return (
    <Modal
      isOpened
      className="component-submit-detail"
      titleText="确认信息"
      cancelText="取消"
      onCancel={onCancel}
      onConfirm={onSubmit}
      confirmText={submiteButtonText}
    >
      <View className="submit-detail-main">
        <View className="submit-detail-data">
          <View className="submit-detail-row">
            <View className="submit-detail-label">姓名</View>
            <View className="submit-detail-detail">{data.userName}</View>
          </View>
          <View className="submit-detail-row">
            <View className="submit-detail-label">手机号码</View>
            <View className="submit-detail-detail">{data.phone}</View>
          </View>
          <View className="submit-detail-row">
            <View className="submit-detail-label">球拍品牌</View>
            <View className="submit-detail-detail">{data.racketBrandName}</View>
          </View>
          <View className="submit-detail-row">
            <View className="submit-detail-label">穿线类型</View>
            <View className="submit-detail-detail">{data.threadingTypeName}</View>
          </View>
          {data.lineTypeName && data.threadingTypeName === "购买" && (
            <View className="submit-detail-row">
              <View className="submit-detail-label">线型号</View>
              <View className="submit-detail-detail">{data.lineTypeName}</View>
            </View>
          )}
          <View className="submit-detail-row">
            <View className="submit-detail-label">磅数</View>
            <View className="submit-detail-detail">{data.linePoundName}</View>
          </View>
          <View className="submit-detail-row">
            <View className="submit-detail-label">备注</View>
            <View className="submit-detail-detail">{data.userRemark}</View>
          </View>
          <View className="submit-detail-row">
            <View className="submit-detail-label">取拍时间</View>
            <View className="submit-detail-detail">{data.date}</View>
          </View>
          <View className="submit-detail-row">
            <View className="submit-detail-label">预计费用</View>
            <View className="submit-detail-detail submit-detail-flex">
              <View>￥{(data.price * 100 + data.servicePrice * 100) / 100}</View>
              <View className="submit-detail-price-btn" onClick={() => setShowPriceDetail(true)}>
                明细
                <PriceDetail
                  show={showPriceDetail}
                  productPrice={data.price}
                  otherPrice={[{ key: "CODE_SERVICE_CHARGE", name: "服务费", value: data.servicePrice }]}
                ></PriceDetail>
              </View>
            </View>
          </View>
        </View>
      </View>
      {showPriceDetail && <View className="price-detail-mask" onClick={() => setShowPriceDetail(false)}></View>}
    </Modal>
  )
}
